<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ include file="/include/taglibs.jsp"%>

<style type="text/css">
body {
	background-image: url(../images/mainframe-bg.jpg);
	background-repeat: repeat-x;
	margin: 0px auto;
	padding: 0px;
	position: relative;
	text-align: center;
}
</style>

<script language="javascript">
<!--
function senfe(o,a,b,c,d){
var t=document.getElementById(o).getElementsByTagName("tr");
for(var i=0;i<t.length;i++){
t[i].style.backgroundColor=(t[i].sectionRowIndex%2==0)?a:b;
t[i].onclick=function(){
if(this.x!="1"){
this.x="1";//本来打算直接用背景色判断，FF获取到的背景是RGB值，不好判断
this.style.backgroundColor=d;
}else{
this.x="0";
this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
}
}
$(t[i]).mouseover(function(){
if(this.x!="1")this.style.backgroundColor=c;
});
$(t[i]).mouseout(function(){
if(this.x!="1")this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
});
}
}
$(document).ready(function (){
	//senfe("表格名称","奇数行背景","偶数行背景","鼠标经过背景","点击后背景");
	senfe("t_user","#e5f1f4","#f8fbfc","#ecfbd4","#bce774");
});
--></script>

<script type="text/javascript">
function doDelete(id){
	var prompt = "确实要删除此区局吗？";
	if(window.confirm(prompt)){
		document.location.href = "<%=request.getContextPath()%>/common.regionnavi.do?action=delete&id="+id;
	}
}

function doSeleDelete(){  
	var prompt = "确实要删除选择用户吗？";	
	if(window.confirm(prompt)){
		var url_str = "<%=request.getContextPath()%>/common.regionnavi.do?action=delete&rnd"+Math.random();
		frmList.action = url_str;		
		frmList.submit();	
	}
}

function search(){			
   frmList.submit();	
}

</script>

<div >
<div style="text-align: left; color: red"><html:errors /></div>

<form id="frmList" action="common.regionquery.do" method="post" >
<table width="100%" border="0" cellpadding="3" cellspacing="0"
	class="sanxuan" style="background-repeat: repeat;">
	<tbody>
		<tr>
			<td height="31" width="900px"
				style="font-size: 14px; color: white; text-align: center">&nbsp;区域查询</td>
		</tr>
		<tr>
			<td>
			<table border="0" width="95%" align="center">
				<tr align="left">
					<td><strong>顶级区域 :</strong>
					<select name="regionId" id="regionId"  style ="width:125px" onChange="doAutoSelect('regionId',this.value,'subregionId');">
						<option value="">请选择...</option>
						<c:forEach items="${RA_ROOT_REGIONS}" var="region">
							<option value="${region.idRegion}">${region.regionName}</option>
						</c:forEach>
					</select>
					<strong>下级区域 :</strong>
					<select name="subregionId" id="subregionId"  style ="width:250px">
						<option value="">请选择...</option>
						<c:forEach items="${RA_SUB_REGIONS}" var="region">
							<option value="${region.idRegion}">${region.regionName}</option>
						</c:forEach>
					</select>					    
					</td>										
					<td align="left">
					<img src="<%=request.getContextPath() %>/images/table/chaxun.gif" width="90" height="30" style="cursor:hand;" onclick="javascript:search();"/>					
					</td>
				</tr>
			</table>
			</td>
		</tr>
	</tbody>
</table>
<div class="guanli"  style="float:right;"><br />
<c:if test="${empty param.flag}">
	<input name="add" type="button" class="button" value="添加"
		onclick="javascript:go('common.regionnavi.do?action=add')" />
	<input type="button" name="delete" class="button" value="批量删除"
		onclick="javascript:doSeleDelete();" />
</c:if>
</div>
<table width="100%" cellpadding="4" class="liebiao" id="t_region"
	align="center">
	<thead>
		<tr>
			<td width="23" align="center"><c:if test="${empty param.flag}">
				<input id="all" name="all" type="checkbox" 	onclick="list_select_all();" />
			</c:if></td>
			<td>区域名称</td>	
			<td>上级区域</td>						
			<td>&nbsp;</td>
		</tr>
	</thead>
	<tbody>
		<c:forEach var='region' items="${RA_PAGER_ITEMS}" varStatus="vs">
			<tr>
				<td class="list-value"><input id="id" name="id" type="checkbox"
					value="${region.idRegion}" onClick="list_check_selection()"></td>
				<td class="list-value">${region.regionName}</td>
				<td class="list-value">${RA_REGION_MAP[region.prentRegionId].regionName}</td>												
				<td class="list-value" style="width: 250px;"><a class="modify"
					href="common.regionnavi.do?action=modify&id=${region.idRegion}">编辑</a>
				<a class="delete" href="javascript:doDelete(${region.idRegion})"> 删除 </a>				
				</td>
			</tr>
		</c:forEach>
	</tbody>
	<tfoot>
	</tfoot>
</table>
<br/>
<div class="pagenav"><jsp:include page="/include/pager.jsp"
	flush="true" /></div>	
</form>
</div>
<script type="text/javascript">
	var st = new SortableTable( document.getElementById("t_region"), ["None", "String" ,"None"],'#E4EEF7','white','#FF9900');
</script>

<script type="text/javascript">
var type;
var targetId;
function doAutoSelect(typeTemp,keyValue,targetTemp) {
    
	type=typeTemp;
	targetId=targetTemp;
      var url = "<c:url value='/common.regionAutoSelect.do?keyValue="+keyValue+"&type="+type+"'/>";
     　　if (window.XMLHttpRequest) {
             　　  req = new XMLHttpRequest();
     　　}else if (window.ActiveXObject) {
             　　req = new ActiveXObject("Microsoft.XMLHTTP");
     　　}
     　 if(req){
             　req.open("GET",url, true);
             　　req.onreadystatechange = complete;
             　　req.send(null);
     　　}
 }
 function complete(){
     　　if (req.readyState == 4) {
             　　if (req.status == 200) {
	             if(type=="regionId"){
	            	  var strLink = req.responseXML.getElementsByTagName("subregion");
         	    	  var key=new Array();
         	    	  var value=new Array();
                      for(var i=0;i<strLink.length;i++){                      	                    	
                          key[i]=strLink[i].firstChild.data.split(",")[0];                                                
                          value[i]=strLink[i].firstChild.data.split(",")[1];                            
                     　　}                     
                     buildSelect(key,value,document.getElementById(targetId));   
         	     }
         	  }
     　　}
 }
function buildSelect(key,value,sel) {
     　　	sel.options.length=0;
		sel.options[sel.options.length]=new Option("请选择...","");
     　　	for(var i=0;i<key.length;i++) {     	
             　　sel.options[sel.options.length]=new Option(value[i],key[i]);
     　　	}
}
</script>